<template>
  <div>
    <p> 每500ms，watch函数执行一次 </p>
    <input v-model="source" type="text" />
    <br />
    <pre>{{ log }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// https://vueuse.org/shared/throttledWatch/
// 进行节流处理的watch函数
import { throttledWatch } from '@vueuse/core';

const source = ref('');
const log = ref('');

throttledWatch(
  source,
  v => {
    log.value += `new value："${v}"\n`;
  },
  {
    throttle: 500,
  },
);
</script>
